<script setup lang="ts">
import {h} from 'vue';
import {message, Tag} from 'ant-design-vue';
import {useForm, useModal} from '#/ui-kit';
import {useDictStore} from '#/stores';

import {createDictItemInfo, updateDictItemInfo} from "#/api/system/dict-item";

const emits = defineEmits(['close']);

const {getDictData} = useDictStore();

const [Modal, modalApi] = useModal({
  draggable: true,
  closeOnClickModal: false,
  destroyOnClose: true,
  onConfirm: function () {
    formApi.validateAndSubmitForm();
  },
  onBeforeClose: function () {
    modalApi.setState({confirmLoading: false})
    modalApi.setData({});
    formApi.resetForm();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      formApi.setValues(modalApi.getData(), false, false);
    }
  }
});

const colorOptions = [
  {label: 'default', value: 'default'},
  {label: 'success', value: 'success'},
  {label: 'warning', value: 'warning'},
  {label: 'error', value: 'error'},
  {label: 'red', value: 'red'},
  {label: 'processing', value: 'processing'},
  {label: 'magenta', value: 'magenta'},
  {label: 'volcano', value: 'volcano'},
  {label: 'orange', value: 'orange'},
  {label: 'gold', value: 'gold'},
  {label: 'lime', value: 'lime'},
  {label: 'green', value: 'green'},
  {label: 'cyan', value: 'cyan'},
  {label: 'blue', value: 'blue'},
  {label: 'geekblue', value: 'geekblue'},
  {label: 'purple', value: 'purple'},
];

const [Form, formApi] = useForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
      allowClear: true,
    },
  },
  layout: 'horizontal',
  showDefaultActions: false,
  schema: [
    {
      label: '字典标签',
      fieldName: 'label',
      component: 'Input',
      componentProps: {placeholder: '请输入字典名称'},
      rules: 'required',
    },
    {
      label: '字典键值',
      fieldName: 'value',
      component: 'Input',
      componentProps: {placeholder: '请输入字典编码'},
      rules: 'required',
    },
    {
      label: '标签颜色',
      fieldName: 'color',
      component: 'Select',
      componentProps: {
        placeholder: '请选择标签颜色',
        options: colorOptions,
      },
      renderComponentContent: () => ({
        option: (item) => {
          return h(Tag, {color: item.value}, {default: () => item.label});
        }
      }),
    },
    {
      label: '排序',
      fieldName: 'sort',
      component: 'InputNumber',
      componentProps: {placeholder: '请输入排序'},
      defaultValue: 0,
      rules: 'required',
    },
    {
      label: '启用状态',
      fieldName: 'enableStatus',
      component: 'RadioGroup',
      componentProps: {
        options: getDictData('enable_status', true),
      },
      defaultValue: 0,
    },
    {
      label: '备注',
      fieldName: 'remark',
      component: 'Textarea',
      componentProps: {placeholder: '请输入备注'},
    },
  ],
  handleSubmit: function (values) {
    modalApi.setState({confirmLoading: true})
    values.dictId = modalApi?.getData()?.dictId;
    if (values?.id) {
      updateDictItemInfo(values).then(() => {
        message.success('字典项更新成功');
        modalApi.close();

        emits('close');
      }).finally(() => {
        modalApi.setState({confirmLoading: false})
      });
    } else {
      createDictItemInfo(values).then(() => {
        message.success('字典项新增成功');
        modalApi.close();

        emits('close');
      }).finally(() => {
        modalApi.setState({confirmLoading: false})
      });
    }
  }
});
</script>

<template>
  <Modal>
    <Form/>
  </Modal>
</template>